<template>
  <div v-if="value!=='hidden'" class="wrap">
    <div class="placeholder" :style="{'height':statusBarHeight+'px'}" />
    <div class="anchor-nav">
      <svg-icon class="icon" icon-class="xiangzuo" @click.native.stop="leftHandle" />
      <div>
        <Scroll ref="scroll" horizontal style="width: auto">
          <div ref="tabs" class="nav">
            <slot>
              <div v-for="(a,i) in anchors" :key="i" :class="['nav-item', {'nav-item-active':value!==undefined&&value===a.value}]" @click="clickHandle(a)">{{ a.label }}</div>
            </slot>
          </div>
        </Scroll>
      </div>
      <div class="a-btn">
        <MoreClose class="a-more-close" black />
      </div>
    </div>
  </div>
</template>
<script>
import Scroll from '@/components/Scroll'
import MoreClose from '@/components/MoreClose'
import { mapGetters } from 'vuex'
export default {
  name: 'AnchorNav',
  components: {
    Scroll,
    MoreClose
  },
  props: {
    anchors: {
      type: Array,
      default: () => []
    },
    value: {
      type: [String, Number],
      default: undefined
    },
    goback: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {

    }
  },
  computed: {
    ...mapGetters(['statusBarHeight'])
  },
  watch: {
    value(v) {
      const i = this.anchors.findIndex(a => a.value === v)
      if (i === -1) {
        return
      }
      const els = this.$refs.tabs?.querySelectorAll('.nav-item')
      if (els?.[i]) {
        const left = els[i].offsetLeft
        const top = els[i].offsetTop
        this.$refs.scroll.scrollTo(i === 0 ? 0 : left, top)
      }
    }
  },
  methods: {
    leftHandle() {
      if (this.goback) {
        this.$router.go(-1)
      } else {
        this.$emit('left')
      }
    },
    clickHandle(anchor) {
      sessionStorage.setItem('__scroll', true)
      const ele = document.querySelector(`#${anchor.value}`)
      const { height } = this.$el.getBoundingClientRect()
      if (ele) {
        // ele.scrollIntoView({ behavior: 'auto', block: 'start', inline: 'nearest' })
        window.scrollTo({
          top: ele.offsetTop - height,
          behavior: 'auto'
        })
      }
      this.$emit('input', anchor.value)
      this.$emit('click', anchor.value)
    }
  }
}
</script>
<style lang="less" scoped>
.wrap{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  z-index: 999;
  .placeholder{
    height: 20PX;
  }
  .anchor-nav{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: #fff;
    padding-right: 12PX;
    height: 44PX;
    .icon{
      flex: 0 0 auto;
      font-size: 24PX;
      color:rgba(51, 51, 51, 1);
      margin: 0 10PX 0 10PX;
    }
    .nav{
      // flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      padding: 4PX 0px;
      height: 30PX;
      .nav-item{
        flex: 0 0 auto;
        font-size: 14PX;
        color: rgba(51, 51, 51, 1);
        font-weight: 400;
        &:last-child{
          padding-right: 12PX !important;
          &::after{
            width: calc(50% - 6PX);
            left: calc(50% - 6PX);
          }
        }
      }
      .nav-item + .nav-item{
        margin-left: 20PX;
      }
      .nav-item-active {
        position: relative;
        font-weight: 700;
        &::after{
          content: "";
          display: block;
          position: absolute;
          bottom: -5PX;
          left: 50%;
          transform: translateX(-50%);
          width: 50%;
          height: 3PX;
          background: linear-gradient(180deg, #00C8B4 0%, #5AF2E3 100%);
          border-radius: 1.5PX;
        }
      }
    }
    .a-btn{
      flex: 1 0 auto;
      // padding-right: 12px;
    }
    .a-more-close{
      float: right;
      border: 1px solid #333333;
      background-color: #fff !important;
    }
  }
}
</style>
